<template>
<!-- 排行页面 -->
    <div class="fa init">
       <div class="top container">
        <img src="../assets/img/logo.gif" alt="" />
        <div class="box">
            <div>
            <router-link to="/search" tag="input"
                type="search"
                class="inp1"
                placeholder="输入菜名、食材、作者"
            />
            <router-link to="/search" tag="input" type="submit" class="inp2 fa" value=""  />
            </div>
        </div>
        </div>

    <div class="tabto container">
        <div v-for="(item,index) in imgs" :key="index">
            <a @click="smalladd(index,item.heading)">
                <img :src="item.imgurl" alt="">
                <p>{{item.title}}</p>
            </a>
        </div>
        <!-- <div>
            <a href="">
                <img src="./img/r02.jpg" alt="">
                <p>人气菜肴</p>
            </a>
        </div>
        <div>
            <a href="">
                <img src="./img/r03.jpg" alt="">
                <p>夏季食谱</p>
            </a>
        </div>
        <div>
            <a href="">
                <img src="./img/r04.jpg" alt="">
                <p>高颜值</p>
            </a>
        </div>
        <div>
            <a href="">
                <img src="./img/r05.jpg" alt="">
                <p>快手菜</p>
            </a>
        </div>
        <div>
            <a href="">
                <img src="./img/r06.jpg" alt="">
                <p>早餐</p>
            </a>
        </div>
        <div>
            <a href="">
                <img src="./img/r07.jpg" alt="">
                <p>家常菜谱</p>
            </a>
        </div>
        <div>
            <a href="">
                <img src="./img/r08.jpg" alt="">
                <p>烘焙大全</p>
            </a>
        </div>
        <div>
            <a href="">
                <img src="./img/r09.jpg" alt="">
                <p>亲子专区</p>
            </a>
        </div>
        <div>
            <a href="">
                <img src="./img/r10.jpg" alt="">
                <p>菜谱分类</p>
            </a>
        </div> -->
    </div>

    <div class="listto container">
        <div class="fl" v-for="(item,index) in dataitem" :key="index" >
            <img :src="item.img" alt="">
            <h3>{{item.h3}}</h3>
            <p>{{item.p}}</p>
        </div>
    </div>
    
     <div class="bottom container">
        <ul>
            <li>
            <router-link tag="a" to="/home">
                <span id="bottom-home"></span>
                <p>首页</p>
            </router-link>
            </li>
            <li  class="con">
            <router-link tag="a" to="/init">
                <span id="bottom-top"></span>
                <p>排行</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/classify">
                <span id="bottom-list"></span>
                <p>分类</p>
            </router-link>
            </li>
            <li>
                <router-link tag="a" to="/info"  >
                <span id="bottom-recipe"></span>
                <p>资讯</p>
                </router-link>
            </li>
            <li>
            <router-link tag="a" to="/my">
                <span id="bottom-user"></span>
                <p>我的</p>
            </router-link>
            </li>
        </ul>
        </div>
    </div>
</template>

<script>
import{getinitdata} from "../api/home.js"
    export default {
        data() {
            return {
                imgs:null,
                dataitem:null
            };
        },
        created(){
            getinitdata().then(data=>{
                this.imgs = data.data;
                this.dataitem = data.item;
            })
        },
        mounted(){
            window.scrollTo(0,0);
        },
        methods:{
            // 判断跳转页面
            smalladd(index,item){
                console.log(item);
                if(index==9){
                    this.$router.push("/classify")
                }else {
                    this.$router.push({ path:"/small", query: {item} })
                }
                
            }
        }
    }
</script>

<style lang="scss" >
@import "../assets/css/init.css";
.init{
    background-color: #fff;
}
</style>